<template>
  <div class="preview">
    <!--    产品信息-->
    <div class="box">
      <i class="iconfont icon-fanhui" @click="$emit('close')"></i>
      <h1 class="title">产品信息</h1>
      <div class="top">
        <img :src="row.defaultPicUrl" alt="">
        <span class="moreLine">{{row.productEname}}</span>
      </div>
      <ul>
        <li style="width: 100%" class="end"><span>中文名称：</span><b class="moreLine">{{row.productName}}</b></li>
      </ul>
      <ul class="wrap">
        <li><span>产品编码：</span>{{row.productCode}}</li>
        <li><span>产品类型：</span>{{row.productTypeName}}</li>
        <li><span>产品分组：</span>{{row.typeName}}</li>
        <li><span>计量单位：</span>{{row.productUnitName}}</li>
        <li class="end" style="width: 100%"><span>关键词：</span><b>{{row.productKeyWord}}</b></li>
      </ul>
    </div>
    <!--价格信息-->
    <div class="box">
      <h1 class="title">价格信息</h1>
      <ul>
        <li><span>离岸价：</span>{{row.productSpec.offshoreCurrencyUnitName}} {{row.productSpec.offshorePrice}}</li>
        <li><span>含税成本价：</span>{{row.productSpec.costCurrencyUnitName}} {{row.productSpec.costPrice}}</li>
        <li><span>单价：</span>{{row.productSpec.unitPriceCurrencyName}} {{row.productSpec.unitPrice}}</li>
      </ul>
    </div>
    <!--包装信息-->
    <div class="box">
      <h1 class="title">包装信息</h1>
      <ul class="wrap">
        <li><span>包装单位：</span>{{row.productSpec.packingUnitName}}</li>
        <li><span style="width: 91px">每包装产品数：</span>{{row.productSpec.packageNumber}}{{row.productUnitName}}</li>
        <li><span>包装体积：</span>{{row.productSpec.packageVolume}}m³</li><li><span>包装毛重：</span>{{row.productSpec.packagingGrossWeight}}Kg</li>
        <li><span>外箱长：</span>{{row.productSpec.outerBoxLong}}cm</li><li><span>外箱宽：</span>{{row.productSpec.outerBoxWidth}}cm</li>
        <li><span>外箱高：</span>{{row.productSpec.outerBoxHigh}}cm</li><li><span>产品净重：</span>{{row.productSpec.productWeight}}Kg</li>
        <li class="end" style="width: 100%">
          <span>包装说明：</span>
          <b class="moreLine" v-html="row.productSpec.packageInstruction"></b>
        </li>
      </ul>
    </div>
    <!--包装信息-->
    <div class="box">
      <h1 class="title">包装信息</h1>
      <ul class="spec" v-if="row.productImageList.length>0">
        <li>
          <span>产品主图：</span>
          <viewer>
            <img v-for="item,index in row.productImageList"
                 :src="item.fileUrl" alt="">
          </viewer>
        </li>
        <li>
          <span>产品视频：</span>
          <a href="javascript:void (0)" v-if="row.productAttachList.length>0">
            <video controls class="product_video" width="213px" height="150px" >
              <source :src="row.productAttachList[0].fileUrl" type="video/mp4">
            </video>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
    import {getProductDetails} from '@/api/product'

    export default {
        name: "ProductReview",
        props: {
            ID: {
                type: Number,
                default: 0
            },
        },
        data() {
            return {
                row: {
                    productEname: '',//英文名称
                    productName: '',//中文名称
                    productSpecification: '',//规格名称
                    productType: '',//产品类型
                    productSource: '',//产品来源
                    productModel: '',//产品型号
                    productCode: '',//产品编码
                    typeId: '',//产品分组
                    productUnit: '',//计量单位
                    minimum: '',//最小起订量
                    hsCode: '',//海关编码
                    productKeyWord: '',//关键词  , 分割
                    productSpec: {//规格对象
                        offshorePrice: '',//离岸价
                        offshoreCurrencyUnit: '',//离岸价币种
                        costPrice: '',//含税成本价
                        costCurrencyUnit: '',//含税成本价单位
                        unitPrice: '',//单价
                        unitPriceCurrency: '',//单价币种
                        firstPrice: '',//一档价格
                        firstNumber: '',//一档数量
                        secondPrice: '',//二档价格
                        secondNumber: '',//二档数量
                        samplePrice: '',//样品价格
                        sampleNumber: '',//样品数量
                        packingUnit: '',//包装单位
                        packageNumber: '',//每包装产品数
                        packageVolume: '',//包装体积
                        packagingGrossWeight: '',//包装毛重
                        outerBoxLong: '',//外箱长
                        outerBoxWidth: '',//外箱宽
                        outerBoxHigh: '',//外箱高
                        productWeight: '',//产品净重
                    },
                    productImageList: [],//产品图片列表
                    productAttachList: [{fileUrl:''}],//产品视频列表
                    remarks: '',//富文本描述
                    releaseStatus: 0,//是否上架
                }
            }
        },
        watch: {
            ID: {
                immediate: true,
                handler(val) {
                    this.getDetail(val);
                }
            }
        },
        methods: {
            getDetail(id) {
                getProductDetails(id).then((res) => {
                    this.row = res.data.data;
                })
            }
        }
    }
</script>

<style scoped lang="scss">
.preview{
  padding: 0 5px;
  .box{
    padding: 10px 40px;
    border-radius:20px;
    background-color: #fff;
    margin-bottom: 15px;
    position: relative;
    .icon-fanhui{
      position: absolute;
      top: 7px;
      left: 10px;
      color: #2A97F9;
      font-size: 22px;
      cursor: pointer;
    }
    .title{
      font-size: 15px;
      color: #000;
      font-weight: 600;
      margin-bottom: 10px;
    }
    .top{
      display: flex;
      margin-bottom: 5px;
      img{
        width: 40px;
        height: 40px;
        border-radius: 5px;
        margin-right: 15px;
      }
      span{
        font-size: 14px;
      }
    }
    ul{
      li{
        color: #232323;
        line-height: 30px;
        font-size: 13px;
        span{
          width: 78px;
          display: inline-block;
        }
      }
      .end{
        display: flex;
        width: 100%;
        b{
          font-size: 13px;
          display: inline-block;
          width: 80%;
          font-weight: normal;
        }
      }
    }
    ul.wrap{
      display: flex;
      flex-wrap: wrap;
      li{
        width: 50%;
      }
    }
    ul.spec{
      li{
        display: flex;
        margin-bottom: 15px;
        img{
          width: 60px;
          height: 60px;
          border-radius: 5px;
          margin-right: 10px;
        }
      }

    }
  }
}
</style>
